// 下载弹窗
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Button, List, Modal, Typography } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { handleDownload } from '@/utils';
import styles from './index.module.less';
const { Text } = Typography;
export default forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showDownloadModal: showDownloadModal,
    closeDownloadModal: closeDownloadModal,
  }));

  const { movieDetail } = props;
  const [downloadModalVisible, setDownloadModalVisible] = useState(false);
  // 展示下载弹窗
  const showDownloadModal = () => {
    setDownloadModalVisible(true);
  };

  // 关闭下载弹窗
  const closeDownloadModal = () => {
    setDownloadModalVisible(false);
  };

  return (
    <Modal
      title="选择下载版本"
      open={downloadModalVisible}
      onCancel={closeDownloadModal}
      footer={null}
      width={800}
      centered
    >
      <div className={styles.downloadModalContent}>
        <List
          itemLayout="horizontal"
          dataSource={movieDetail?.downloadUrls || []}
          renderItem={(item) => (
            <List.Item
              actions={[
                <Button
                  type="primary"
                  icon={<DownloadOutlined />}
                  onClick={() => {
                    debugger;
                    handleDownload(item.href);
                    closeDownloadModal();
                  }}
                >
                  下载
                </Button>,
              ]}
            >
              <List.Item.Meta
                title={
                  <a
                    href={item.href}
                    onClick={(e) => {
                      e.preventDefault();
                      handleDownload(item.href);
                      closeDownloadModal();
                    }}
                    className={styles.downloadLink}
                  >
                    {item.text}
                  </a>
                }
                description={
                  <div className={styles.linkDetails}>
                    <div className={styles.detailRow}>
                      {/* <span className={styles.detailItem}>
                        <Text type="secondary">大小：</Text>
                        {item.size}
                      </span> */}
                      <span className={styles.detailItem}>
                        <Text type="secondary">语言：</Text>
                        {movieDetail?.language ?? ''}
                      </span>
                      {/* <span className={styles.detailItem}>
                        <Tag
                          color={
                            item.speed === '高速'
                              ? 'green'
                              : item.speed === '中速'
                              ? 'blue'
                              : 'orange'
                          }
                        >
                          {item.speed}
                        </Tag>
                      </span> */}
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </div>
    </Modal>
  );
});
